<template>
    <div id="add-algorithm">
        <el-dialog
            title="添加算法"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="120px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="名称" prop="v_Name">
                            <el-input v-model="ruleForm.v_Name" placeholder="名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="算法库名称" prop="v_LibName">
                            <el-input v-model="ruleForm.v_LibName" placeholder="算法库名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="算法方法名称" prop="v_MethodName">
                            <el-input v-model="ruleForm.v_MethodName" placeholder="算法方法名称" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="算法类型" prop="n_Type">
                            <el-select 
                                v-model="ruleForm.n_Type" 
                                filterable 
                                class="m-2" 
                                value-key="value"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in n_TypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="状态" prop="n_Status">
                            <el-switch
                                v-model="ruleForm.n_Status"
                                class="mt-2"
                                style="margin-left: 24px"
                                inline-prompt
                                active-icon="Check"
                                inactive-icon="Close"
                                :active-value="0"
                                :inactive-value="1"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="版本" prop="n_Version">
                            <el-input type="number" v-model="ruleForm.n_Version" placeholder="版本" clearable />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="ruleForm.v_Remark" placeholder="备注" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm(ruleFormRef)">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, toRaw } from 'vue'
import { FormInstance, FormRules, ElButton, ElCol, ElDialog, ElForm, ElFormItem, ElInput, ElRow } from 'element-plus'
import { useDropdownData } from '../hooks/index'
import { Add } from '/@/api/its/algorithm'
import { RuleFormType } from '../types/algorithmType'
import { FormType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'add-algorithm',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
    },
    setup(props,ctx){
        const ruleFormRef = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive <FormType<RuleFormType>> ({
            repeatDis: false,
            ruleForm: {
                n_Id: 0,
                v_Name: '',
                v_LibName: '',
                v_MethodName: '',
                n_Type: 0,
                n_Version: 1,
                n_Status: 0,
                v_Remark: ''
            } as RuleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive <FormRules> ({
            /*** 放置验证 */
            // 名称
            v_Name: [
				{ required: true, message: '请输入名称', trigger: 'blur' },
			],
            // 算法库名称
            v_LibName: [
				{ required: true, message: '请输入算法库名称', trigger: 'blur' },
			],
            // 算法方法名称
            v_MethodName: [
				{ required: true, message: '请输入算法方法名称', trigger: 'blur' },
			],
            // 算法类型(0视频流 1图片)
            n_Type: [
                { required: true, message: '请输入算法类型', trigger: 'change' },
			],
            // 版本
            n_Version: [
                { required: true, message: '请输入算法版本', trigger: 'change' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ruleFormRef.value.resetFields()
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true
                    let param = toRaw(state.ruleForm)
                    let res: any = null
                    try {
                        res = await Add(param)
                    }finally {
                        state.repeatDis = false
                    }
                    
                    if(res.success){
                        ctx.emit('close','success')
                        ctx.emit('updateData')
                    }
                }else{
                    console.log('error submit!')
                }
            })
        }

        //下拉选项
        const { n_TypeOption } = useDropdownData()

        return {
            handleClose,
            submitForm,
            ruleFormRef,
            ...toRefs(state),
            rules,
            n_TypeOption,
        }
    },
} )
</script>
<style scoped lang="scss">
#add-algorithm{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>